<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/lazy.css">
    <script src="laztImage.js"></script>
</head>
<body>
    <div class="lazyAll">
        <div class="laztImageBox">
            <div>
               <img src="image/loading.png" lazt-image="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881530968&di=25f67319d28331beda5b78fba1899c63&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F86%2F10%2F01300000184180121920108394217.jpg"/> 
            </div>
            <div>
                <img src="image/loading.png" lazt-image="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881530968&di=25f67319d28331beda5b78fba1899c63&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F86%2F10%2F01300000184180121920108394217.jpg"/> 
             </div>
        </div>
        <!-- <div class="laztImageBox">
            <img src="image/loading.png" lazt-image="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603881530968&di=25f67319d28331beda5b78fba1899c63&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F86%2F10%2F01300000184180121920108394217.jpg"/>
        </div> -->
    </div>
    
 
    <script>
        // 方法1:传统懒加载 getBoundingClientRect()
        // var laztImageBox = document.querySelector('.laztImageBox'),
        //     lazyImage   = laztImageBox.querySelector('img');
        // const singleLazy = function singleLazy(){
        //     let trueImg = lazyImage.getAttribute('lazt-image')
        //     lazyImage.src = trueImg
        //     lazyImage.onload = () =>{
        //         lazyImage.style.opacity = 1
        //     }
        //     laztImageBox.isload = true
        // }
        // const lazyFunc = function lazyFunc(){
        //     let A = laztImageBox.getBoundingClientRect().bottom;
        //     let B = document.documentElement.clientHeight;
        //     if(laztImageBox.isload){return}
        //     if(A<=B){
        //         singleLazy()
        //     }
        // }
        // setTimeout(lazyFunc,1000)
        // window.onscroll = lazyFunc

        // 方法2：使用dom监听器 IntersectionObserver()
        // const option  = {threshold:[1] }
        // let ob = new IntersectionObserver(item=>{
        //     console.log(item)
        //     let {
        //         isIntersecting,
        //         target
        //     } = item[0]
        //     if(isIntersecting){
        //         singleLazy()
        //         ob.unobserve(laztImageBox);//加载真实图片后，移除对盒子的监听
        //     }
        // },option)
        // ob.observe(laztImageBox)

        


        // 方法3：
        var laztImageBox = document.querySelector('.laztImageBox')
        LazyImage({context:laztImageBox,attr:"lazt-image"})
    </script>
</body>
</html>